<template>
	<div class="cart">
		<Header
				:cartHeaderFlag="shopCart.shopCart.length>0"
				:update="update"
				@changeAction="changeAction"
		/>
		<div class="cart-main">
			<div class="cart-container">
				<Empty v-show="shopCart.shopCart.length===0"/>
				<cart-list v-show="shopCart.shopCart.length>0" :shopCart="shopCart.shopCart"/>
				<guess-like/>
			</div>
		</div>
		<Footer
				:update="update"
				:allTotal="allTotal"
				v-show="shopCart.shopCart.length>0"
		/>
	</div>
</template>

<script>
	import {mapState, mapGetters, mapActions} from 'vuex';
	import Header from "#/Cart/Header";
	import Footer from "#/Cart/Footer";
	import Empty from '#/Cart/Empty';
	import CartList from '#/Cart/CartList';
	import GuessLike from '#/Cart/GuessLike';

	export default {
		name: "Cart",
		data() {
			return {
				update: true,
			}
		},
		methods: {
			...mapActions(['changeCheckAll', 'setRecommendList']),
			changeAction(flag) {
				this.update = flag;
				this.changeCheckAll(flag);
			}
		},
		computed: {
			...mapState(['shopCart', 'recommendList']),
			...mapGetters(['allTotal', 'guessLikeList']),
		},
		components: {
			Header,
			Footer,
			Empty,
			CartList,
			GuessLike
		}
	}
</script>
